<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
    table tr th,
    table tr td {
        width: calc(100% / 8);
        text-align: center;
    }

    .plan-title {
        padding: 12px 0 12px 0;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        text-align: center
    }

    .plan-title span {
        font-size: 16px;
        margin: 0 36px 0 36px;
    }

</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <table class="table table-bordered" style="margin-bottom: 0">
        <tbody>
        <tr>
            <td>借款金额</td>
            <td>¥[[${order.loanAmount}]]</td>
        </tr>
        <tr>
            <td>收款账户</td>
            <td>[[${order.bankName}]]
                <span th:if="${order.bankCardNumber != null && order.bankCardNumber.length() >4}">
                    [[${#strings.substring(order.bankCardNumber,order.bankCardNumber.length()-4,order.bankCardNumber.length())}]]
                </span>
            </td>
        </tr>
        <tr>
            <td>借款期数</td>
            <td>[[${order.orderPeriods}]]个月</td>
        </tr>
        <tr>
            <td>起止日期</td>
            <td>
                <span th:if="${plans != null && plans.size() >0}">
                    <span style="margin-right: 8px;">[[${plans[0].dueDate}]]</span>/
                    <span style="margin-left: 8px;">[[${plans[plans.size()-1].dueDate}]]</span>
                </span>
            </td>
        </tr>
        <tr>
            <td>还款日期</td>
            <td>每月10号</td>
        </tr>
        <tr>
            <td>计息方式</td>
            <td>等额本息</td>
        </tr>
        <tr>
            <td>还款方式</td>
            <td>按月还本付息</td>
        </tr>
        <tr>
            <td>是否自动还款</td>
            <td>是</td>
        </tr>
        </tbody>
    </table>
    <div class="plan-title"><span>已还款 ¥[[${amounted}]]</span><span>待还款 ¥[[${amounting}]]</span></div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>期数</th>
            <th>日期</th>
            <th>应还金额</th>
            <th>账单状态</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="plan,iterStat : ${plans}">
            <td th:text="${plan.installmentNo}"></td>
            <td th:text="${plan.dueDate}"></td>
            <td th:text="${plan.dueAmount}"></td>
            <td>
                <span th:if="${plan.status == 'ONGOING' || plan.status == '' || plan.status == null}">进行中</span>
                <span th:if="${plan.status == 'PARTIAL_REPAID'}">部分还款</span>
                <span th:if="${plan.status == 'REPAID'}">已还完</span>
                <span th:if="${plan.status == 'OVERDUE'}">逾期</span>
                <span th:if="${plan.status == 'EARLY_SETTLEMENT'}">提前结清</span>
            </td>
        </tr>
        <tr th:if="${plans == null || plans.size() ==0}">
            <td colspan="4">暂无数据</td>
        </tr>
        </tbody>
    </table>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">

</script>
</body>
</html>
